import { defineConfig,loadEnv,ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

//纯静态开发测试时，使用mockjs虚拟异步返回
import { viteMockServe } from "vite-plugin-mock"
import { visualizer } from "rollup-plugin-visualizer"
import viteCompression from "vite-plugin-compression"
import {resolve} from "path"

//移动端适配
import autoprefixer from 'autoprefixer'
import postCssPxToRem from 'postcss-pxtorem'
// https://vitejs.dev/config/
export default defineConfig(({command, mode}:ConfigEnv) => {
    const env = loadEnv(mode, './env')
    console.log(env, command, mode)
    let plugins = []
    if (mode === 'mock') {
        //npm run dev 时引入mock
        plugins.push(
            viteMockServe({
                mockPath: "./mock/",
                localEnabled: true,
                prodEnabled: false,
                // injectCode: `
                //     import { setupMock } from './mock/index';
                //     setupMock();
                // `,
                // 我们不需要build打包后生产环境还能用，因此不需要做/mock目录下index.ts的特殊设计，也不需要做injectCode注入
                watchFiles: true, // 监听文件内容变更
            })
        )
    } else if (mode === "production") {
        // 打包依赖包大小展示
        plugins.push(
            visualizer({
                open: true,
                gzipSize: true,
                brotliSize: true,
            })
        )
    }
    return {
        plugins: [
            vue(),
            AutoImport({   //自动载入vue,vue-router,pinia的命令，减少import代码编写量
                dts:true,
                dirs:['src/store','src/hooks','src/api'],
                imports:['vue','vue-router','pinia'],
            }),
            Components({
                dts: true,
                dirs: ['src/components','src/layout'], // 按需自动加载的文件夹， 减少import自定义组件的代码编写量
                resolvers: [VantResolver()],//这样就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件
            }),
            // gizp压缩
            viteCompression({
                verbose: true,
                disable: false,
                threshold: 10240,
                algorithm: "gzip",
                ext: ".gz",
            }),
            ...plugins
        ],
        envDir:'./env',
        resolve: {
            // 设置文件目录别名; 根目录地址变更，也需要调整
            alias: {
                '@': resolve(__dirname, './src'),
            },
        },

        build: {
            target: command === 'build' ? 'es2015' : 'modules',
            //设置打包出来的静态资源存放目录
            assetsDir: "assets",
            // 启用、禁用css代码拆分
            cssCodeSplit: true,
            sourcemap: false, //是否构建source map 文件
            // 指定输出目录
            outDir: resolve(__dirname, 'dist'),
            emptyOutDir: true, //构建时默认先清空dist目录
            minify: 'terser', // 混淆器，terser构建后文件体积更小
            terserOptions: {
                // 生产环境下移除console
                compress: {
                    drop_console: true,
                    drop_debugger: true
                }
            },
        },

        css: {
            // css预处理器
            // preprocessorOptions: {
            //     scss: {
            //         additionalData: `@use "./src/assets/scss/theme.scss" as *;`,
            //     },
            // },
            //移动端自动适配插件
            postcss: {
                plugins: [
                    autoprefixer({
                        overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
                    }),
                    postCssPxToRem({
                        // 自适应，px>rem转换
                        rootValue: 37.5,
                        propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                        selectorBlackList: ['norem'], // 过滤掉norem-开头的class，不进行rem转换
                    }),
                ],
            },
        },

        // 本地运行配置，及反向代理配置
        server: {
            host: env.VITE_HOST, // 指定服务器主机名
            //host: '192.168.137.1',  //临时使用电脑热点，让手机连热点后测试
            port: parseInt(env.VITE_PORT,10) || undefined, // 指定服务器端口
            open: true, // 在服务器启动时自动在浏览器中打开应用程序
            cors: true, // 允许跨域
            https: false, // 是否开启 https 未来的工程中需考虑https生产环境
        },
    }
})
